Remove scrollbars from filters #1015
Conversation
There was a problem hiding this comment.
Can you also verify that a site without this issue still looks/works as expected? Rose said not all sites seemed to suffer from this problem. I think it would also be good to verify Rose's suspicion that font size and margin are the culprit here. Were you able to verify that?
| @@ -23,8 +23,9 @@ | |||
| } | |||
|
|
|||
| &-options { | |||
| margin-top: 4px; | |||
| margin-bottom: 4px; | |||
| margin: 0; | |||
There was a problem hiding this comment.
Is the margin: 0 necessary here? Do the options inherit margin from somewhere up the CSS chain?
There was a problem hiding this comment.
Yes, it's inheriting margin from the SDK styling for yxt-FilterOptions-options
|
The underlying problem is that if a custom font-size is specified for Edit: After talking with Rose, I added a variable so that the line height can be changed easily from the same place the font size is customized. |
Given this, do we still need to remove the margin and replace it with padding in |
I asked Rose if we should just add the variable, but she was in favor of also modifying the padding/margin to give customers a little more lee-way before the scrollbar appears. |
### Features - Consumer Authentication support was added for the Sandbox environment. (#996) - The existing `image` formatter was updated to support photos sent from the Streams API. (#998) - Support for Direct Answers on Vertical was added to the `vertical-standard` template. It is commented out by default. (#994) ### Changes - To better support Consumer Authentication, the `AnswersExperience.init()` method can be called on `Document` load. (#995) - The default `universalLimit` for all Vertical page configs was updated to 4. (#1010, #1021) ### Bugfixes - Ensured that in all page templates, the `SpellCheck` appears above the `ResultsCount`. (#1011, #1017) - In the `highlightedField` formatter, any HTML tag that appears in the text, that is not `<mark>` or `</mark>`, is now escaped. (#1012) - Font pre-loads on Multi-lang sites now work correctly. (#1018) - A new CSS variable was added: `--yxt-filter-options-option-label-line-height`. This variable, when kept in proper proportion to `--yxt-filters-and-sorts-font-size`, will ensure the scroll bar does not erroneously appear for filter options. (#1015, #1019)
### Features - Consumer Authentication support was added for the Sandbox environment. (#996) - The existing `image` formatter was updated to support photos sent from the Streams API. (#998) - Support for Direct Answers on Vertical was added to the `vertical-standard` template. It is commented out by default. (#994) ### Changes - To better support Consumer Authentication, the `AnswersExperience.init()` method can be called on `Document` load. (#995) - The default `universalLimit` for all Vertical page configs was updated to 4. (#1010, #1021) ### Bugfixes - Ensured that in all page templates, the `SpellCheck` appears above the `ResultsCount`. (#1011, #1017) - In the `highlightedField` formatter, any HTML tag that appears in the text, that is not `<mark>` or `</mark>`, is now escaped. (#1012) - Font pre-loads on Multi-lang sites now work correctly. (#1018) - A new CSS variable was added: `--yxt-filter-options-option-label-line-height`. This variable, when kept in proper proportion to `--yxt-filters-and-sorts-font-size`, will ensure the scroll bar does not erroneously appear for filter options. (#1015, #1019)
Change styling of
yxt-FilterOptions-optionsto remove scrollbars that were appearing on filters even when all options were displayed for some cases with custom font sizes. Add a--yxt-filters-and-sorts-line-heightvariable so that customers can change the line-height of theoptionLabeleasily if the scrollbar appears with even larger custom font sizes.J=SLAP-1727
TEST=visual
See that filter scrollbar was removed on a site where it was previously appearing.